<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{padding: 0;margin: 0; list-style-type: none;}
        .cont{ width: 1200px; height: 500px; margin: 50px auto; background: #000; position: relative; transition: all 2s; overflow:hidden;}
        .cont .ct{ padding: 20px; box-sizing: border-box; display: flex; flex-direction: row; height: 500px; overflow: hidden; position: absolute; top: 0; left: 0; transition: all 1s;}
        .cont .ct .cont-1{ width: 500px; height: 100%; background: #fff; margin-right: 15px; flex: none;}
        .pages{ position: absolute; width: 100%; display: flex; justify-content: space-between; align-items: center; z-index: 20; left: 0; top: 50%; transform: translateY(-50%);}
        .pages span{ color: #fff; padding: 10px 20px; border-radius: 5px; background: red; display: flex; justify-content: center; align-items: center;}
    </style>
</head>
<body>
    <div class="cont">
        <div class="ct">
            <div class="cont-1">1</div>
            <div class="cont-1">2</div>
            <div class="cont-1">3</div>
            <div class="cont-1">4</div>
            <div class="cont-1">5</div>
            <div class="cont-1">6</div>
        </div>
        <div class="pages">
             
        </div>
    </div>
    <script>
        // let prev = document.querySelector('.prev');
        // let next = document.querySelector('.next');
        let ct = document.querySelector('.ct');
        let allWith = document.querySelector('.cont');
        let pages = document.querySelector('.pages');
        //获取ct宽度
        let ctWidth = ct.offsetWidth;
        //获取allWith宽度
        let allWithWidth = allWith.offsetWidth;
        //prev点击事件 向左滑动
        let preves = document.createElement('span');
        preves.className = 'prev';
        preves.innerText = 'prev';
        let nextse = document.createElement('span');
        nextse.className = 'next';
        nextse.innerText = 'nexts';
        pages.appendChild(preves);
        pages.appendChild(nextse);
        let danwei = 500;
        preves.onclick = function(){
            let ctLeft = parseInt(window.getComputedStyle(ct).left);
            ctLeft = ctLeft - danwei;
            console.log(ctLeft);
            if(Math.abs(ctLeft)  >   (ctWidth - allWithWidth)  ){
                ct.style.left = -(ctWidth - allWithWidth) + 'px';
                return
            }
            ct.style.left = ctLeft + 'px';
        }
        //next点击事件
        nextse.onclick = function(){
           let rtleft = parseInt(window.getComputedStyle(ct).left);
           console.log(rtleft);
            rtleft = rtleft + danwei;
            if(rtleft > 0){
                ct.style.left = '0px';
                return
            }
            ct.style.left = rtleft + 'px';
        }
        //鼠标点击滑动事件
        let qishiX = 0;
        let qishiY = 0;
        let jieshuX = 0;
        let jieshuY = 0;
        huadong = false;
        allWith.onmousedown = function(e){
            console.log(e);
            huadong = true;
            qishiX = e.clientX;
            qishiY = e.clientY;
        }
        allWith.onmousemove = function(e){
            if(huadong){
                jieshuX = e.clientX;
                jieshuY = e.clientY;
                if((qishiX - jieshuX) > 50 ){
                    console.log('left');
                    let mtLeft = parseInt(window.getComputedStyle(ct).left);
                    mtLeft = mtLeft - danwei;
                    console.log(mtLeft);
                    if(Math.abs(mtLeft)  >   (ctWidth - allWithWidth)  ){
                        ct.style.left = -(ctWidth - allWithWidth) + 'px';
                        return
                    }
                    ct.style.left = (mtLeft - 500) + 'px';
                }else if((qishiX - jieshuX) < -50){
                    console.log('right');
                    let rstLeft = parseInt(window.getComputedStyle(ct).left);
                    if(rstLeft > 0 ){
                        return
                    }
                    ct.style.left = 0 + 'px';
                }
                e.preventDefault();
            }
        }
        allWith.onmouseup = function(e){
            console.log(e);
            huadong = false;
        }

        let timer = setInterval(()=>{
            let ccleft = parseInt(window.getComputedStyle(ct).left);
            if(ccleft > 0 ){
                ct.style.left = 0 + 'px';
            }
            if(ccleft < -(ctWidth - allWithWidth)){
               ccleft = ccleft + 500;
            }else if(ccleft <= 0){
                ccleft = ccleft - 500;
            }
            ct.style.left = ccleft + 'px';
        },1000)

        allWith.onmouseup = function(){
            clearInterval(timer);
        }
    </script>
</body>
</html>